<template>
  <!-- <div class="building-container"> -->
  <el-dialog
    title="编辑项目"
    :visible.sync="dialogFormVisible"
    width="80%"
    @close="() => (dialogFormVisible = false)"
  >
    <el-form
      ref="buildingInfoForm"
      :model="formatFormData"
      size="small"
      label-width="200px"
      label-position="right"
    >
      <el-card class="card-form" shadow="hover">
        <el-divider>基本信息</el-divider>
        <el-col :span="6">
          <el-form-item label="开盘时间" prop="openingQuotation">
            <el-date-picker
              v-model.trim="formatFormData.base.openingQuotation"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择开盘时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装修情况" prop="renovationCondition">
            <el-input
              v-model.trim="formatFormData.base.renovationCondition"
              placeholder="请输入装修情况"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目状态" prop="estateStatus">
            <el-radio-group
              v-model.trim="formatFormData.estateStatus"
              size="medium"
            >
              <el-radio
                v-for="(item, index) in estateStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="物业类型" prop="propertyType">
            <el-input
              v-model.trim="formatFormData.base.propertyType"
              placeholder="请输入物业类型"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->

        <el-col :span="12">
          <el-form-item label="售楼地址" prop="salesAddress">
            <el-input
              v-model.trim="formatFormData.base.salesAddress"
              placeholder="请输入售楼地址"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="预售证" prop="preSaleCertificate">
            <el-input
              v-model.trim="formatFormData.base.preSaleCertificate"
              placeholder="请输入预售证"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="项目地址" prop="address">
            <el-input
              v-model.trim="formatFormData.base.address"
              placeholder="请输入项目地址"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="floorName">
            <el-input
              v-model.trim="formatFormData.floorName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑类别" prop="buildingCategory">
            <el-input
              v-model.trim="formatFormData.base.buildingCategory"
              placeholder="请输入建筑类别"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="项目名称" prop="projectName">
            <el-select
              v-model.trim="formatFormData.base.projectName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
            >
              <div v-for="(item, index) in optionProject" :key="index">
                <el-option :label="item" :value="item"></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col> -->
      </el-card>
      <el-card class="card-form" shadow="hover">
        <el-divider>建筑规划</el-divider>
        <el-col :span="12">
          <el-form-item label="周边商业" prop="peripheralBusiness">
            <el-input
              v-model.trim="formatFormData.planing.peripheralBusiness"
              type="textarea"
              placeholder="请输入周边商业"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边交通" prop="trafficAround">
            <el-input
              v-model.trim="formatFormData.planing.trafficAround"
              type="textarea"
              placeholder="请输入周边交通"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边医院" prop="surroundHospitals">
            <el-input
              v-model.trim="formatFormData.planing.surroundHospitals"
              type="textarea"
              placeholder="请输入周边医院"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边学校" prop="schoolAround">
            <el-input
              v-model.trim="formatFormData.planing.schoolAround"
              type="textarea"
              placeholder="请输入周边学校"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-card>
      <el-card class="card-form" shadow="hover">
        <el-divider>销售信息</el-divider>
        <el-col :span="8">
          <el-form-item label="开发商" prop="developerName">
            <el-input
              v-model.trim="formatFormData.sellInfo.developerName"
              placeholder="请输入开发商"
              clearable
              :style="{ width: '100%' }"
              @focus="handleFocus"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建筑面积(平方米)" prop="floorSpace">
            <el-input-number
              v-model.trim="formatFormData.sellInfo.floorSpace"
              placeholder="请输入建筑面积"
              clearable
              :step="100"
              :min="0"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="绿化率(%)" prop="greeningRate">
            <el-input-number
              v-model.trim="formatFormData.sellInfo.greeningRate"
              :style="{ width: '100%' }"
              :step="1"
              :max="100"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="户数" prop="houseHoldsNum">
            <el-input-number
              v-model.trim="formatFormData.sellInfo.houseHoldsNum"
              placeholder="请输入户数"
              clearable
              :step="10"
              :min="0"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产权" prop="property">
            <el-input-number
              v-model.trim="formatFormData.sellInfo.property"
              placeholder="请输入产权(年)"
              clearable
              :step="1"
              :max="100"
              :min="0"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="占地面积(平方米)" prop="constructionArea">
            <el-input-number
              v-model.trim="formatFormData.sellInfo.constructionArea"
              placeholder="请输入占地面积"
              clearable
              :step="100"
              :min="0"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="容积数" prop="volume">
            <el-input-number
              v-model.trim="formatFormData.sellInfo.volume"
              placeholder="请输入容积数"
              :step="20"
              clearable
              :style="{ width: '100%' }"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col> -->
      </el-card>
      <el-form-item class="btn">
        <el-button type="primary" @click="createBuildingInfo()">修改</el-button>
        <!-- <el-button @click="resetForm()">重置</el-button> -->
      </el-form-item>
    </el-form>
    <develop-dialog ref="dialog" @click="getRow"></develop-dialog>
  </el-dialog>
</template>
<script>
  import {
    createBuilding,
    fetchSingleBuilding,
    updateBuilding,
  } from '@/api/building'
  import DevelopDialog from './DevelopDialog.vue'
  import _ from 'lodash'
  export default {
    name: 'EditBuilding',
    components: { DevelopDialog },
    data() {
      return {
        dialogFormVisible: false,
        formatFormData: {
          base: {
            openingQuotation: '',
            renovationCondition: '',
            // propertyType: '',
            buildingCategory: '',
            salesAddress: '',
            // preSaleCertificate: '',
            address: '',
          },
          estateStatus: 0,
          floorName: '',
          floorId: '',
          planing: {
            peripheralBusiness: '',
            trafficAround: '',
            surroundHospitals: '',
            schoolAround: '',
          },
          sellInfo: {
            developerName: '',
            floorSpace: 0,
            greeningRate: 0,
            constructionArea: 0,
            houseHoldsNum: 0,
            property: 0,
            // volume: 0,
          },
        },
        estateStatusOptions: [
          {
            label: '未开售',
            value: 0,
          },
          {
            label: '销售中',
            value: 1,
          },
          {
            label: '已售罄',
            value: 2,
          },
        ],
        optionProject: [],
      }
    },
    created() {
      // this.getDefaultData()
    },
    mounted() {},
    methods: {
      handleFocus() {
        console.log('ssss')
        this.$refs['dialog'].showEdit()
      },
      getRow(row) {
        console.log(row)
        this.formatFormData.sellInfo.developerName = row.userName
        this.formatFormData.sellInfo.developerId = row.userId
      },
      async showEdit(row) {
        if (row.floorId) {
          const { data } = await fetchSingleBuilding(row.floorId)
          if (data.status == 0) {
            this.formatFormData = data.body
            delete this.formatFormData.base.preSaleCertificate
            delete this.formatFormData.base.propertyType
            delete this.formatFormData.sellInfo.volume
          } else {
            this.$baseMessage(data.message, 'error')
          }
        } else {
        }
        this.dialogFormVisible = true
      },
      checkRule() {
        let rule = 0
        _.forIn(this.formatFormData.sellInfo, function (value, key) {
          if (_.isNil(value) || value == 0 || value == '') rule = 3
        })
        _.forIn(this.formatFormData.planing, function (value, key) {
          if (_.isNil(value) || value == 0 || value == '') rule = 2
        })
        _.forIn(this.formatFormData.base, function (value, key) {
          if (_.isNil(value) || value == 0 || value == '') rule = 1
        })
        switch (rule) {
          case 1:
            this.$baseMessage('基本信息参数输入错误！', 'error')
            return false
            break
          case 2:
            this.$baseMessage('建筑规划参数输入错误！', 'error')
            return false
            break
          case 3:
            this.$baseMessage('销售信息参数输入错误！', 'error')
            return false
            break
        }
        return true
      },
      createBuildingInfo() {
        if (!this.checkRule()) {
          return
        }
        this.$refs['buildingInfoForm'].validate((valid) => {
          if (valid) {
            console.log(JSON.stringify(this.formatFormData))
            updateBuilding(this.formatFormData).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功！',
                type: 'success',
                duration: 2000,
              })
              // this.$router.push('/building/list')
              this.$emit('fetch-data')
              this.dialogFormVisible = false
            })
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .card-form {
    margin-top: 5px;
    border: 1px solid #efefef;
    border-radius: 10px;
  }
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
